<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="售后单号">
          <el-input
            v-model="searchForm.after_sale_no"
            placeholder="请输入售后单号"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input
            v-model="searchForm.product_name"
            placeholder="请输入商品名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <!-- <el-form-item label="手机号">
          <el-input
            v-model="searchForm.mobile"
            placeholder="请输入手机号"
            clearable
            style="width: 200px"
          />
        </el-form-item> -->
        
        <!-- <el-form-item label="售后类型">
          <el-select v-model="searchForm.type" placeholder="请选择售后类型" clearable style="width: 150px">
            <el-option label="退款" :value="1" />
            <el-option label="退款/退货" :value="2" />
            <el-option label="退货" :value="3" />
          </el-select>
        </el-form-item> -->
                 <el-form-item label="状态">
           <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 150px">
             <el-option label="待审核" :value="0" />
             <el-option label="审核通过" :value="1" />
             <el-option label="审核拒绝" :value="2" />
             <el-option label="待退货" :value="3" />
             <el-option label="待收货" :value="4" />
             <el-option label="退款中" :value="5" />
             <el-option label="退款成功" :value="6" />
             <el-option label="退款失败" :value="7" />
             <el-option label="已关闭" :value="8" />
           </el-select>
         </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="never">
      <div class="table-header">
        <span class="table-title">售后订单列表</span>
        <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
      </div>
      
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        stripe
        style="width: 100%"
        size="small"
      >
        <el-table-column prop="after_sale_no" label="售后单号" width="180" />
        <el-table-column prop="order_no" label="订单号" width="120" />
        <el-table-column label="商品信息" min-width="300">
          <template slot-scope="scope">
            <div class="product-info">
              <el-image
                :src="scope.row.main_image"
                :preview-src-list="[scope.row.main_image]"
                fit="cover"
                class="product-image"
              />
              <div class="product-detail">
                <div class="product-name">{{ scope.row.product_name }}</div>
                <div class="product-specs">
                  <span v-for="spec in scope.row.specs" :key="spec.spec_name" class="spec-item">
                    {{ spec.spec_name }}: {{ spec.spec_value }}
                  </span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" width="200">
          <template slot-scope="scope">
            <div class="user-info">
              <div>{{ scope.row.user.nickname }}</div>
              <div class="user-remark">{{ scope.row.user.remark }}</div>
              <div class="user-mobile">{{ scope.row.user.mobile }}</div>
            </div>
          </template>
        </el-table-column>
                 <el-table-column label="原因" width="200">
           <template slot-scope="scope">
             <el-tag :type="getReasonTagType(scope.row.reason)">
               {{ getReasonText(scope.row.reason) }}
             </el-tag>
           </template>
         </el-table-column>
        <el-table-column label="售后类型" width="100">
          <template slot-scope="scope">
            <el-tag :type="getTypeTagType(scope.row.type)">
              {{ getTypeText(scope.row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column label="申请金额" width="120">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.apply_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应付金额" width="120">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.total_amount || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支付金额" width="120">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.pay_amount || '0.00' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="减免金额" width="120">
          <template slot-scope="scope">
            <span class="amount discount">¥{{ ((scope.row.total_amount || 0) - (scope.row.pay_amount || 0)).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款金额" width="120">
          <template slot-scope="scope">
            <span class="amount">¥{{ scope.row.refund_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否使用优惠券" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.coupon_name" type="success" size="small">是</el-tag>
            <el-tag v-else type="info" size="small">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="coupon_name" label="优惠券" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.coupon_name" class="coupon-name">{{ scope.row.coupon_name }}</span>
            <span v-else class="no-coupon">无</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="refund_msg" label="退款失败原因" width="250">
          
        </el-table-column>

                 <el-table-column label="申请时间" width="160">
           <template slot-scope="scope">
             {{ formatTime(scope.row.created_at) }}
           </template>
         </el-table-column>
         <el-table-column label="订单物流" width="200">
           <template slot-scope="scope">
             <div v-if="scope.row.expre && scope.row.expre.Traces && scope.row.expre.Traces.length > 0" class="express-info">
               <el-tag size="small" type="success">{{ scope.row.expre.ShipperCode || '未知快递' }}</el-tag>
               <div class="express-no">{{ scope.row.expre.LogisticCode || '未知单号' }}</div>
               <div class="express-status">{{ scope.row.expre.Traces[0].AcceptStation }}</div>
             </div>
             <span v-else class="no-express">暂无订单物流</span>
           </template>
         </el-table-column>
         <el-table-column label="退货物流" width="200">
           <template slot-scope="scope">
             <div v-if="scope.row.express_company && scope.row.express_no" class="express-info">
               <el-tag size="small" type="info">{{ scope.row.express_company }}</el-tag>
               <div class="express-no">{{ scope.row.express_no }}</div>
               <el-button type="text" size="mini" @click="handleViewExpress(scope.row)">查看退货物流</el-button>
             </div>
             <span v-else class="no-express">暂无退货物流</span>
           </template>
         </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
                         <el-button 
               v-if="scope.row.status === 0"
               type="text" 
               size="small" 
               @click="handleAudit(scope.row)"
             >审核</el-button>
                           <el-button 
                v-if="(scope.row.status === 1 ||  scope.row.status == 7) && scope.row.type === 1"
                type="text" 
                size="small" 
                @click="handleRefund(scope.row)"
              >退款</el-button>
              <el-button 
                v-if="scope.row.status == 7 && scope.row.type === 2"
                type="text" 
                size="small" 
                @click="handleRefund(scope.row)"
              >退款</el-button>
              <el-button 
                v-if="scope.row.status === 1&& scope.row.type === 2"
                type="text" 
                size="small" 
                @click="handleExchange(scope.row)"
              >退款/退货</el-button>
              <el-button 
                v-if="scope.row.status === 3 && scope.row.express_company && scope.row.express_no"
                type="text" 
                size="small" 
                @click="handleRefund(scope.row)"
              >退款</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="pagination.current_page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.per_page"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 查看详情弹窗 -->
    <el-dialog title="售后订单详情" :visible.sync="detailDialogVisible" width="800px">
      <div v-if="currentOrder" class="order-detail">
        <el-table :data="[currentOrder]" border size="small">
          <el-table-column prop="after_sale_no" label="售后单号" width="180" />
          <el-table-column prop="order_no" label="订单号" width="120" />
          <el-table-column prop="user.nickname" label="用户昵称" width="120" />
          <el-table-column prop="user.remark" label="用户备注" width="120" />
          <el-table-column prop="user.mobile" label="手机号" width="120" />
          <el-table-column label="售后类型" width="100">
            <template slot-scope="scope">
              {{ getTypeText(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column label="申请金额" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.apply_amount }}
            </template>
          </el-table-column>
          <el-table-column label="应付金额" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.total_amount || '0.00' }}
            </template>
          </el-table-column>
          <el-table-column label="支付金额" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.pay_amount || '0.00' }}
            </template>
          </el-table-column>
          <el-table-column label="减免金额" width="100">
            <template slot-scope="scope">
              <span class="discount">¥{{ ((scope.row.total_amount || 0) - (scope.row.pay_amount || 0)).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退款金额" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.refund_amount }}
            </template>
          </el-table-column>
          <el-table-column label="是否使用优惠券" width="120">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.coupon_name" type="success" size="small">是</el-tag>
              <el-tag v-else type="info" size="small">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="优惠券" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.coupon_name" class="coupon-name">{{ scope.row.coupon_name }}</span>
              <span v-else class="no-coupon">无</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              {{ getStatusText(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="申请时间" width="160">
            <template slot-scope="scope">
              {{ formatTime(scope.row.created_at) }}
            </template>
          </el-table-column>
        </el-table>
        
        <div class="detail-section">
          <h4>商品信息</h4>
          <div class="product-detail-info">
            <el-image :src="currentOrder.main_image" fit="cover" class="detail-product-image" />
            <div class="detail-product-text">
              <div class="detail-product-name">{{ currentOrder.product_name }}</div>
              <div class="detail-product-specs">
                <span v-for="spec in currentOrder.specs" :key="spec.spec_name" class="spec-item">
                  {{ spec.spec_name }}: {{ spec.spec_value }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>售后原因</h4>
          <p>{{ currentOrder.description }}</p>
        </div>

        <div v-if="currentOrder.proof_images && currentOrder.proof_images.length > 0" class="detail-section">
          <h4>凭证图片</h4>
          <div class="proof-images">
            <el-image
              v-for="(img, index) in currentOrder.proof_images"
              :key="index"
              :src="img"
              :preview-src-list="currentOrder.proof_images"
              fit="cover"
              class="proof-image"
            />
          </div>
        </div>

        <div v-if="currentOrder.audit_remark" class="detail-section">
          <h4>审核备注</h4>
          <p>{{ currentOrder.audit_remark }}</p>
        </div>

        <!-- 订单物流信息 -->
        <div v-if="currentOrder.expre && currentOrder.expre.Traces" class="detail-section">
          <!-- <h4>订单物流信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="快递公司">{{ currentOrder.expre.ExpressCompany || '未知' }}</el-descriptions-item>
            <el-descriptions-item label="快递单号">{{ currentOrder.expre.ExpressNo || '未知' }}</el-descriptions-item>
          </el-descriptions> -->
          
          <!-- 物流轨迹 -->
          <div class="express-tracking">
            <h5>物流轨迹</h5>
            <div class="tracking-list">
              <div 
                v-for="(trace, index) in currentOrder.expre.Traces" 
                :key="index"
                class="tracking-item"
                :class="{ 'tracking-current': index === 0 }"
              >
                <div class="tracking-time">{{ formatTime(trace.AcceptTime) }}</div>
                <div class="tracking-content">
                  <div class="tracking-station">{{ trace.AcceptStation }}</div>
                  <div class="tracking-location">{{ trace.Location }}</div>
                  <!-- <div class="tracking-action">操作码: {{ trace.Action }}</div> -->
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 退货物流信息 -->
        
      </div>
    </el-dialog>

         <!-- 审核弹窗 -->
     <el-dialog title="审核售后订单" :visible.sync="auditDialogVisible" width="500px">
       <el-form :model="auditForm" :rules="auditRules" ref="auditForm" label-width="100px">
                  <el-form-item label="审核结果" prop="audit_result">
            <el-radio-group v-model="auditForm.audit_result">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
         <el-form-item label="审核备注" prop="audit_remark">
           <el-input
             v-model="auditForm.audit_remark"
             type="textarea"
             :rows="4"
             placeholder="请输入审核备注"
           />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="auditDialogVisible = false">取消</el-button>
         <el-button type="primary" @click="submitAudit">确定</el-button>
       </div>
     </el-dialog>

           <!-- 退款弹窗 -->
      <el-dialog title="退款申请" :visible.sync="refundDialogVisible" width="500px">
        <el-form :model="refundForm" :rules="refundRules" ref="refundForm" label-width="100px">
          <el-form-item label="退款金额" prop="refund_amount">
            <el-input
              v-model="refundForm.refund_amount"
              placeholder="请输入退款金额"
              style="width: 200px"
            >
              <template slot="prepend">¥</template>
            </el-input>
            <div class="form-tip">用户申请金额：¥{{ currentOrder ? currentOrder.apply_amount : '0.00' }}</div>
          </el-form-item>
          <el-form-item label="退款备注" prop="refund_remark">
            <el-input
              v-model="refundForm.refund_remark"
              type="textarea"
              :rows="4"
              placeholder="请输入退款备注"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="refundDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitRefund">确定</el-button>
        </div>
      </el-dialog>

      <!-- 退货物流信息弹窗 -->
      <el-dialog title="退货物流信息" :visible.sync="expressDialogVisible" width="700px">
        <div v-if="currentOrder" class="express-detail">
          <el-table :data="[currentOrder]" border size="small">
            <el-table-column prop="express_company" label="快递公司" width="150" />
            <el-table-column prop="express_no" label="快递单号" width="200" />
            <el-table-column prop="after_sale_no" label="售后单号" width="180" />
            <el-table-column label="申请时间" width="160">
              <template slot-scope="scope">
                {{ formatTime(scope.row.created_at) }}
              </template>
            </el-table-column>
          </el-table>
          
          <div v-if="currentOrder.logisticsData && currentOrder.logisticsData.Traces" class="express-tracking">
            <h4>退货物流跟踪</h4>
            <div class="tracking-list">
              <div 
                v-for="(trace, index) in currentOrder.logisticsData.Traces" 
                :key="index"
                class="tracking-item"
                :class="{ 'tracking-current': index === 0 }"
              >
                <div class="tracking-time">{{ formatTime(trace.AcceptTime) }}</div>
                <div class="tracking-content">
                  <div class="tracking-station">{{ trace.AcceptStation }}</div>
                  <div class="tracking-location">{{ trace.Location }}</div>
                  <!-- <div class="tracking-action">操作码: {{ trace.Action }}</div> -->
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="express-tracking">
            <h4>退货物流跟踪</h4>
            <div class="tracking-list">
              <div class="tracking-item">
                <div class="tracking-time">{{ formatTime(currentOrder.created_at) }}</div>
                <div class="tracking-content">用户提交退款/退货申请，填写物流信息</div>
              </div>
              <div class="tracking-item">
                <div class="tracking-time">{{ formatTime(currentOrder.updated_at) }}</div>
                <div class="tracking-content">快递公司：{{ currentOrder.express_company }}，单号：{{ currentOrder.express_no }}</div>
              </div>
            </div>
          </div>
          
          <div class="express-note">
            <p><strong>说明：</strong>用户已将退货商品通过 {{ currentOrder.express_company }} 快递寄回，单号：{{ currentOrder.express_no }}</p>
            <p v-if="currentOrder.logisticsData && currentOrder.logisticsData.DeliveryManTel">
              <strong>快递员电话：</strong>{{ currentOrder.logisticsData.DeliveryManTel }}
            </p>
            <p><strong>注意：</strong>此物流信息为用户退货时的物流轨迹，用于跟踪退货商品的状态</p>
          </div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { shopserviceList , shopserviceSave , shopinglogistics }  from '../../../libs/api';
export default {
  name: 'AfterSalesManagement',
  data() {
    return {
      loading: false,
      searchForm: {
        after_sale_no: '',
        product_name: '',
        mobile: '',
        type: '',
        status: ''
      },
      tableData: [],
      pagination: {
        total: 0,
        per_page: 10,
        current_page: 1,
        last_page: 1
      },
             detailDialogVisible: false,
       auditDialogVisible: false,
       refundDialogVisible: false,
       expressDialogVisible: false,
       currentOrder: null,
              auditForm: {
          audit_result: 1,
          audit_remark: ''
        },
       refundForm: {
         refund_amount: '',
         refund_remark: ''
       },
       auditRules: {
         audit_result: [
           { required: true, message: '请选择审核结果', trigger: 'change' }
         ],
         audit_remark: [
           { required: true, message: '请输入审核备注', trigger: 'blur' }
         ]
       },
       refundRules: {
         refund_amount: [
           { required: true, message: '请输入退款金额', trigger: 'blur' },
           { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
         ],
         refund_remark: [
           { required: true, message: '请输入退款备注', trigger: 'blur' }
         ]
       }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    async fetchData() {
      this.loading = true
      try {
        // 这里替换为实际的API调用
        const response = await shopserviceList({
            page: this.pagination.current_page,
            per_page: this.pagination.per_page,
            ...this.searchForm
          }) 
        

        if (response.code === 1) {
          this.tableData = response.data.data
          this.pagination = {
            total: response.data.total,
            per_page: response.data.per_page,
            current_page: response.data.current_page,
            last_page: response.data.last_page
          }
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },

    // 搜索
    handleSearch() {
      this.pagination.current_page = 1
      this.fetchData()
    },

    // 重置搜索
    handleReset() {
      this.searchForm = {
        after_sale_no: '',
        nickname: '',
        mobile: '',
        type: '',
        status: ''
      }
      this.pagination.current_page = 1
      this.fetchData()
    },

    // 刷新
    handleRefresh() {
      this.fetchData()
    },

    // 查看详情
    handleView(row) {
      this.currentOrder = row
      this.detailDialogVisible = true
    },

    // 审核
    handleAudit(row) {
      this.currentOrder = row
             this.auditForm = {
         audit_result: 1,
         audit_remark: ''
       }
      this.auditDialogVisible = true
    },

    // 提交审核
    async submitAudit() {
      try {
        await this.$refs.auditForm.validate()
        
                 // 调用审核API
         const response = await shopserviceSave({
           id: this.currentOrder.id,
           status: this.auditForm.audit_result,
           audit_remark: this.auditForm.audit_remark
         })
         
         if (response.code === 1) {
           this.$message.success('审核成功')
           this.auditDialogVisible = false
           this.fetchData()
         } else {
           this.$message.error(response.msg || '审核失败')
         }
      } catch (error) {
        console.error('审核失败:', error)
        this.$message.error('审核失败')
      }
    },

         // 退款
     handleRefund(row) {
       this.currentOrder = row
       this.refundForm = {
         refund_amount: row.apply_amount,
         refund_remark: ''
       }
       this.refundDialogVisible = true
     },

           // 提交退款
      async submitRefund() {
        try {
          await this.$refs.refundForm.validate()
          
          // 调用退款API
          const response = await shopserviceSave({
            id: this.currentOrder.id,
            status: 5, // 退款中
            refund_amount: this.refundForm.refund_amount,
            audit_remark: this.refundForm.refund_remark
          })
          
          if (response.code === 1) {
            this.$message.success('退款申请成功')
            this.refundDialogVisible = false
            this.fetchData()
          } else {
            this.$message.error(response.msg || '退款申请失败')
          }
        } catch (error) {
          console.error('退款失败:', error)
          this.$message.error('退款申请失败')
        }
      },

             // 退款/退货
       handleExchange(row) {
         this.currentOrder = row
         this.$confirm('确认要退款/退货吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(async () => {
           try {
             // 调用退款/退货API
             const response = await shopserviceSave({
               id: row.id,
               status: 3, // 待退货
               audit_remark: '同意退款/退货'
             })
             
             if (response.code === 1) {
               this.$message.success('退款/退货申请成功')
               this.fetchData()
             } else {
               this.$message.error(response.msg || '退款/退货申请失败')
             }
           } catch (error) {
             console.error('退款/退货失败:', error)
             this.$message.error('退款/退货申请失败')
           }
         })
       },

              // 查看退货物流信息
       async handleViewExpress(row) {
         try {
           this.currentOrder = row
           this.expressDialogVisible = true
           
           // 调用物流查询API - 查询用户退货的物流信息
           const res = await shopinglogistics({
             express_company: row.express_company,
             express_no: row.express_no
           })
           
           if (res.code === 1 && res.data.Success) {
             // 保存物流信息到当前订单
             this.currentOrder.logisticsData = res.data
             this.$forceUpdate()
           } else {
             this.$message.warning('物流信息查询失败，请稍后重试')
           }
         } catch (error) {
           console.error('查询退货物流信息失败:', error)
           this.$message.error('查询退货物流信息失败')
         }
       },

       // 完成售后
       handleComplete(row) {
         this.$confirm('确认要完成此售后订单吗？', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(async () => {
           try {
             // 调用完成售后API
             const response = await shopserviceSave({
               id: row.id,
               status: 8, // 已关闭
               audit_remark: '售后完成'
             })
             
             if (response.code === 1) {
               this.$message.success('售后完成成功')
               this.fetchData()
             } else {
               this.$message.error(response.msg || '售后完成失败')
             }
           } catch (error) {
             console.error('售后完成失败:', error)
             this.$message.error('售后完成失败')
           }
         })
       },

    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.per_page = val
      this.pagination.current_page = 1
      this.fetchData()
    },

    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.current_page = val
      this.fetchData()
    },

         // 获取原因标签样式
     getReasonTagType(reason) {
       
       return 'info'
     },

     // 获取原因文本
     getReasonText(reason) {
        const reasonMap = {
         1: '不喜欢/不想要',   // 退款
         2: '商品质量问题',
         3: '发错货',   // 退款/退货
         4: '商品缺件',
         5: '其他'
       }
       return reasonMap[reason] || '未知'
     },

     // 获取类型标签样式
     getTypeTagType(type) {
       const typeMap = {
         1: 'danger',
         2: 'warning',
         3: 'info'
       }
       return typeMap[type] || 'info'
     },

     // 获取类型文本
     getTypeText(type) {
       const typeMap = {
         1: '退款',
         2: '退款/退货',
       }
       return typeMap[type] || '未知'
     },

         // 获取状态标签样式
     getStatusTagType(status) {
       const statusMap = {
         0: 'warning',   // 待审核
         1: 'success',   // 审核通过
         2: 'danger',    // 审核拒绝
         3: 'info',      // 待退货
         4: 'info',      // 待收货
         5: 'warning',   // 退款中
         6: 'success',   // 退款成功
         7: 'danger',    // 退款失败
         8: 'info'       // 已关闭
       }
       return statusMap[status] || 'info'
     },

     // 获取状态文本
     getStatusText(status) {
       const statusMap = {
         0: '待审核',
         1: '审核通过',
         2: '审核拒绝',
         3: '待退货',
         4: '待收货',
         5: '退款中',
         6: '退款成功',
         7: '退款失败',
         8: '已关闭'
       }
       return statusMap[status] || '未知'
     },

    // 格式化时间
    formatTime(time) {
      if (!time) return '-'
      return new Date(time).toLocaleString('zh-CN')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .table-title {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.product-info {
  display: flex;
  align-items: center;
  
  .product-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    margin-right: 12px;
  }
  
  .product-detail {
    flex: 1;
    
    .product-name {
      font-weight: bold;
      margin-bottom: 4px;
    }
    
    .product-specs {
      .spec-item {
        display: inline-block;
        background: #f5f5f5;
        padding: 2px 6px;
        border-radius: 2px;
        font-size: 12px;
        margin-right: 6px;
        margin-bottom: 4px;
      }
    }
  }
}

.user-info {
  .user-remark {
    color: #666;
    font-size: 12px;
    margin: 2px 0;
  }
  
  .user-mobile {
    color: #999;
    font-size: 12px;
  }
}

 .amount {
   font-weight: bold;
   color: #e6a23c;
 }

 .amount.discount {
   color: #67c23a;
   background: #f0f9ff;
   padding: 2px 6px;
   border-radius: 3px;
   border: 1px solid #b3d8ff;
 }

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.order-detail {
  .detail-section {
    margin-bottom: 20px;
    
    h4 {
      margin: 0 0 10px 0;
      color: #333;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
    }
  }
  
  .product-detail-info {
    display: flex;
    align-items: center;
    
    .detail-product-image {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      margin-right: 15px;
    }
    
    .detail-product-text {
      .detail-product-name {
        font-weight: bold;
        margin-bottom: 8px;
      }
      
      .detail-product-specs {
        .spec-item {
          display: inline-block;
          background: #f5f5f5;
          padding: 4px 8px;
          border-radius: 3px;
          font-size: 12px;
          margin-right: 8px;
          margin-bottom: 6px;
        }
      }
    }
  }
  
  .proof-images {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .proof-image {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

 .dialog-footer {
   text-align: right;
 }

 .form-tip {
   font-size: 12px;
   color: #909399;
   margin-top: 5px;
   line-height: 1.4;
 }

 .express-info {
   text-align: center;
   
   .express-no {
     margin: 5px 0;
     font-size: 12px;
     color: #666;
   }
   
   .express-status {
     margin-top: 3px;
     font-size: 11px;
     color: #999;
     line-height: 1.3;
     max-height: 32px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
 }

 .no-express {
   color: #999;
   font-size: 12px;
 }

 .coupon-name {
   color: #e6a23c;
   font-size: 12px;
   font-weight: 500;
   background: #fdf6ec;
   padding: 2px 6px;
   border-radius: 3px;
   border: 1px solid #f5dab1;
 }

 .no-coupon {
   color: #999;
   font-size: 12px;
 }

 .express-detail {
   .express-tracking {
     margin-top: 20px;
     
     h4 {
       margin: 0 0 15px 0;
       color: #333;
       border-bottom: 1px solid #eee;
       padding-bottom: 5px;
     }
     
     .tracking-list {
       .tracking-item {
         display: flex;
         margin-bottom: 15px;
         padding: 15px;
         background: #f8f9fa;
         border-radius: 6px;
         border-left: 3px solid #ddd;
         transition: all 0.3s ease;
         
         &.tracking-current {
           background: #e6f7ff;
           border-left-color: #1890ff;
         }
         
         .tracking-time {
           width: 150px;
           color: #666;
           font-size: 12px;
           flex-shrink: 0;
           font-weight: 500;
         }
         
         .tracking-content {
           flex: 1;
           color: #333;
           
           .tracking-station {
             margin-bottom: 5px;
             line-height: 1.5;
             font-weight: 500;
           }
           
           .tracking-location {
             color: #666;
             font-size: 12px;
             margin-bottom: 3px;
           }
           
           .tracking-action {
             color: #999;
             font-size: 11px;
             background: #f0f0f0;
             padding: 2px 6px;
             border-radius: 3px;
             display: inline-block;
           }
         }
         
         &:hover {
           background: #f0f0f0;
           transform: translateX(2px);
         }
       }
     }
   }
   
  .express-note {
    margin-top: 20px;
    padding: 15px;
    background: #f0f9ff;
    border-radius: 4px;
    border-left: 4px solid #409eff;
    
    p {
      margin: 0 0 8px 0;
      color: #333;
      line-height: 1.6;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 订单详情中的物流轨迹样式
.order-detail {
  .express-tracking {
    margin-top: 15px;
    
    h5 {
      margin: 0 0 10px 0;
      color: #333;
      font-size: 14px;
      font-weight: bold;
    }
    
    .tracking-list {
      .tracking-item {
        display: flex;
        margin-bottom: 10px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 4px;
        border-left: 3px solid #ddd;
        transition: all 0.3s ease;
        
        &.tracking-current {
          background: #e6f7ff;
          border-left-color: #1890ff;
        }
        
        .tracking-time {
          width: 120px;
          color: #666;
          font-size: 11px;
          flex-shrink: 0;
          font-weight: 500;
        }
        
        .tracking-content {
          flex: 1;
          color: #333;
          
          .tracking-station {
            margin-bottom: 3px;
            line-height: 1.4;
            font-size: 12px;
            font-weight: 500;
          }
          
          .tracking-location {
            color: #666;
            font-size: 11px;
            margin-bottom: 2px;
          }
          
          .tracking-action {
            color: #999;
            font-size: 10px;
            background: #f0f0f0;
            padding: 1px 4px;
            border-radius: 2px;
            display: inline-block;
          }
        }
        
        &:hover {
          background: #f0f0f0;
          transform: translateX(1px);
        }
      }
    }
  }
}
</style>
